<template>
	<view class="knowledge-page">
		<!-- 搜索栏 -->
		<view class="search-section">
			<up-search 
				v-model="searchValue" 
				shape="round" 
				placeholder="搜索知识库..." 
				@search="handleSearch"
			></up-search>
		</view>

		<!-- 分类Tab -->
		<up-tabs :list="categories" @change="handleCategoryChange" lineColor="#5B8CFF"></up-tabs>

		<!-- 知识列表 -->
		<scroll-view scroll-y class="scroll-container">
			<!-- 骨架屏 -->
			<view class="skeleton-container" v-if="loading && knowledges.length === 0">
				<view class="skeleton-item" v-for="i in 3" :key="i">
					<view class="skeleton-title skeleton-animate"></view>
					<view class="skeleton-desc skeleton-animate"></view>
					<view class="skeleton-meta skeleton-animate"></view>
				</view>
			</view>

			<!-- 知识列表 -->
			<view class="knowledge-list" v-else-if="knowledges.length > 0">
				<view 
					class="knowledge-card" 
					v-for="item in knowledges" 
					:key="item.id"
					@click="handleKnowledgeClick(item.id)"
				>
					<view class="card-header">
						<up-icon :name="item.icon" size="24" :color="item.color"></up-icon>
						<text class="category-tag">{{ item.category }}</text>
					</view>
					<text class="knowledge-title">{{ item.title }}</text>
					<text class="knowledge-desc">{{ item.description }}</text>
					<view class="card-footer">
						<view class="meta-item">
							<up-icon name="eye" size="14" color="#999"></up-icon>
							<text class="meta-text">{{ item.views }}</text>
						</view>
						<view class="meta-item">
							<up-icon name="thumb-up" size="14" color="#999"></up-icon>
							<text class="meta-text">{{ item.likes }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-else>
				<up-icon name="file-text" size="80" color="#cccccc"></up-icon>
				<text class="empty-text">暂无知识库内容</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

// 搜索值
const searchValue = ref('');

// 分类
const categories = ref([
	{ name: '全部' },
	{ name: '编程' },
	{ name: '学习' },
	{ name: '生活' }
]);

// 当前分类
const currentCategory = ref(0);

// 知识库列表
const knowledges = ref([
	{
		id: 1,
		category: '编程',
		icon: 'code',
		color: '#5B8CFF',
		title: 'JavaScript异步编程详解',
		description: '深入理解Promise、async/await的使用方法和最佳实践...',
		views: 1280,
		likes: 156
	},
	{
		id: 2,
		category: '编程',
		icon: 'code',
		color: '#5B8CFF',
		title: 'Vue3组合式API快速入门',
		description: '从零开始学习Vue3的Composition API，掌握现代前端开发...',
		views: 956,
		likes: 123
	},
	{
		id: 3,
		category: '学习',
		icon: 'bookmark',
		color: '#48BB78',
		title: '高效记忆法：如何快速背单词',
		description: '分享实用的记忆技巧，让你的英语学习事半功倍...',
		views: 2341,
		likes: 287
	},
	{
		id: 4,
		category: '生活',
		icon: 'star',
		color: '#ED8936',
		title: '大学生活必备APP推荐',
		description: '整理了10款实用的校园生活工具，帮你轻松应对大学生活...',
		views: 1567,
		likes: 198
	},
	{
		id: 5,
		category: '学习',
		icon: 'bookmark',
		color: '#48BB78',
		title: '数据结构与算法学习路线',
		description: '从入门到精通，系统学习数据结构和算法的完整路径...',
		views: 3421,
		likes: 412
	}
]);

// 加载状态
const loading = ref(false);

// 搜索
const handleSearch = () => {
	console.log('搜索:', searchValue.value);
};

// 分类切换
const handleCategoryChange = (index) => {
	currentCategory.value = index;
};

// 知识详情
const handleKnowledgeClick = (id) => {
	uni.navigateTo({
		url: `/pages/knowledge/knowledgeDetail?id=${id}`
	});
};
</script>

<style lang="scss" scoped>
@import '../../styles/variables.scss';
@import '../../styles/mixins.scss';

.knowledge-page {
	min-height: 100vh;
	background: $bg-page;

	.search-section {
		padding: $spacing-base $spacing-lg;
		background: $bg-card;
	}

	.scroll-container {
		height: calc(100vh - 200rpx);
		padding: $spacing-base;
	}

	// 骨架屏
	.skeleton-container {
		.skeleton-item {
			@include card;
			padding: $spacing-lg;
			margin-bottom: $spacing-base;

			.skeleton-title {
				height: 40rpx;
				background: $border-light;
				border-radius: $radius-sm;
				margin-bottom: $spacing-base;
				width: 80%;
			}

			.skeleton-desc,
			.skeleton-meta {
				height: 28rpx;
				background: $border-light;
				border-radius: $radius-sm;
				margin-bottom: $spacing-sm;
			}

			.skeleton-animate {
				@include skeleton-animation;
			}
		}
	}

	// 知识列表
	.knowledge-list {
		.knowledge-card {
			@include card;
			padding: $spacing-lg;
			margin-bottom: $spacing-base;

			.card-header {
				display: flex;
				align-items: center;
				gap: $spacing-sm;
				margin-bottom: $spacing-base;

				.category-tag {
					font-size: $font-sm;
					color: $text-secondary;
				}
			}

			.knowledge-title {
				display: block;
				font-size: $font-lg;
				font-weight: $font-semibold;
				color: $text-primary;
				margin-bottom: $spacing-sm;
			}

			.knowledge-desc {
				display: block;
				font-size: $font-sm;
				color: $text-secondary;
				line-height: $line-height-base;
				@include ellipsis(2);
				margin-bottom: $spacing-base;
			}

			.card-footer {
				display: flex;
				gap: $spacing-lg;

				.meta-item {
					display: flex;
					align-items: center;
					gap: $spacing-xs;

					.meta-text {
						font-size: $font-xs;
						color: $text-tertiary;
					}
				}
			}
		}
	}

	// 空状态
	.empty-state {
		@include flex-center;
		flex-direction: column;
		padding: 200rpx 0;
		gap: $spacing-md;

		.empty-text {
			font-size: $font-base;
			color: $text-tertiary;
		}
	}
}
</style>

